<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="info">
            <image class="bg" :src="data.setting.pic_url"></image>
            <view class="flex-row">
                <view class="flex-grow-1" style="position:relative;">
                    <view class="info-1">
                        <view class="flex-row">
                            <view class="flex-grow-1 flex-x-center">账户余额(元)</view>
                        </view>
                    </view>
                    <view class="info-2 flex-x-center">{{data.user_info.money}}</view>
                    <view class="info-3 flex-x-center">
                        <navigator hoverClass="none" url="/pages/recharge/recharge">
                            <view class="info-btn flex-x-center flex-y-center">充值</view>
                        </navigator>
                    </view>
                </view>
            </view>
            <view @tap="click" style="position:absolute;right:0;top:48upx;">
                <image class="info-img" :src="data.setting.p_pic_url"></image>
            </view>
        </view>
        <view :class="['modal-h flex-y-center flex-x-center',show?'':'hidden']">
            <view>
                <view class="w-100 body-h">
                    <view class="flex-x-center">充值说明</view>
                    <scroll-view scrollY="true" style="color:#666;max-height:250upx;margin-top:40upx;">
                        <text>{{data.setting.help}}</text>
                    </scroll-view>
                    <view @tap="close" class="flex-x-center">
                        <view class="btn-h flex-x-center flex-y-center">我知道了</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="ad">
            <navigator class="ad" hoverClass="none" openType="navigate" :url="data.setting.page_url">
                <image :src="data.setting.ad_pic_url"></image>
            </navigator>
        </view>
        <view class="record">
            <view class="record-time flex-x-center flex-y-center">
                <view class="flex-row">
                    <view @tap="dateDown" class="flex-grow-0">
                        <image class="record-img" :src="data.__wxapp_img.balance.left.url" style="margin:0 84upx;"></image>
                    </view>
                    <picker @change="dateChange" class="flex-grow-1" fields="month" mode="date" :value="data.date_1">
                        <view>{{data.date}}</view>
                    </picker>
                    <view @tap="dateUp" class="flex-grow-0">
                        <image class="record-img" :src="data.__wxapp_img.balance.right.url" style="margin:0 84upx;"></image>
                    </view>
                </view>
            </view>
            <view class="record-list">
                <view @tap="GoToDetail" class="record-one flex-row" :data-index="index" v-for="(item,index) in data.list" :key="item.id">
                    <view class="flex-grow-1">
                        <view style="width:500upx;text-align:left">
                            <view class="record-1 text-more">{{item.content}}</view>
                            <view class="record-2">{{item.date}}</view>
                        </view>
                    </view>
                    <view :class="['flex-grow-0 flex-y-center',item.flag!=1?'record-3':'record-4']">{{item.price}}</view>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = !1;
	export default {
		data() {
			return {
				data: {
        show: !1
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
    },
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
        var t = this;
        myVue.getApp.core.showLoading({
            title: "加载中"
        });
        var e = myVue.getApp.core.getStorageSync(myVue.getApp.const.USER_INFO);
        myVue.getApp.request({
            url: myVue.getApp.api.recharge.index,
            success: function(a) {
                e.money = a.data.money, t.getApp.core.setStorageSync(t.getApp.const.USER_INFO, e), 
                t.setData({
                    user_info: e,
                    list: a.data.list,
                    setting: a.data.setting,
                    date_1: a.data.date,
                    date: a.data.date.replace("-", "年") + "月"
                }), t.getApp.core.hideLoading();
            }
        });
    },
		methods:{
			getData: function() {
        var e = this;
        myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.recharge.record,
            data: {
                date: e.data.date_1 || ""
            },
            success: function(a) {
                e.setData({
                    list: a.data.list
                }), e.getApp.core.hideLoading(), t = !1;
            }
        });
    },
		dateChange: function(e) {
        if (!t) {
            t = !0;
            var a = e.detail.value, o = a.replace("-", "年") + "月";
            this.setData({
                date: o,
                date_1: a
            }), this.getData();
        }
    },
    dateUp: function() {
        var e = this;
        if (!t) {
            t = !0;
            var a = e.data.date_1, o = (e.data.date, new Date(a));
            o.setMonth(o.getMonth() + 1);
            var n = o.getMonth() + 1;
            n = (n = n.toString())[1] ? n : "0" + n, e.setData({
                date: o.getFullYear() + "年" + n + "月",
                date_1: o.getFullYear() + "-" + n
            }), e.getData();
        }
    },
    dateDown: function() {
        var e = this;
        if (!t) {
            t = !0;
            var a = e.data.date_1, o = (e.data.date, new Date(a));
            o.setMonth(o.getMonth() - 1);
            var n = o.getMonth() + 1;
            n = (n = n.toString())[1] ? n : "0" + n, e.setData({
                date: o.getFullYear() + "年" + n + "月",
                date_1: o.getFullYear() + "-" + n
            }), e.getData();
        }
    },
    click: function() {
        this.setData({
            show: !0
        });
    },
    close: function() {
        this.setData({
            show: !1
        });
    },
    GoToDetail: function(t) {
        var e = this, a = t.currentTarget.dataset.index, o = e.data.list[a];
        myVue.getApp.core.navigateTo({
            url: "/pages/balance/detail?order_type=" + o.order_type + "&id=" + o.id
        });
    }
		}
	}
</script>

<style scoped>
.info {
    position: relative;
    width: 750upx;
    height: 324upx;
    color: #fff;
    padding: 48upx 0;
    margin-bottom: 20upx;
    z-index: 10;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 324upx;
    z-index: 0;
}

.info-img {
    width: 36upx;
    height: 36upx;
    margin-right: 20upx;
}

.info-2 {
    margin: 30upx 0;
    font-size: 30pt;
    line-height: 1;
}

.info-btn {
    width: 168upx;
    height: 56upx;
    font-size: 13pt;
    border-radius: 28upx;
    border: 1upx solid #fff;
}

.ad {
    width: 100%;
    height: 180upx;
    margin-bottom: 20upx;
}

.ad image {
    width: 100%;
    height: 100%;
}

.record {
    background-color: #fff;
    width: 100%;
}

.record-time {
    width: 100%;
    height: 80upx;
    color: #353535;
}

.record-img {
    width: 12upx;
    height: 20upx;
}

.record-list {
    width: 100%;
    background-color: #fff;
}

.record-one {
    width: 100%;
    height: 140upx;
    border-top: 1upx solid #e2e2e2;
    padding: 0 24upx;
}

.record-1 {
    color: #353535;
    margin-top: 30upx;
    margin-bottom: 15upx;
}

.record-2 {
    color: #666;
    font-size: 9pt;
}

.record-3 {
    font-size: 13pt;
    color: #ff4544;
}

.record-4 {
    font-size: 13pt;
    color: #3fc24c;
}

.modal-h {
    position: fixed;
    left: 0;
    top: var(--window-top);
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
}

.body-h {
    padding: 50upx;
    background-color: #fff;
    width: 600upx;
    border-radius: 10upx;
}

.btn-h {
    margin-top: 64upx;
    width: 100%;
    height: 80upx;
    background-color: #ff4544;
    border-radius: 10upx;
    color: #fff;
}
</style>
